<template>
  <div class="ofans_headers clearFix">
  		<div class="ofans_headers_left" @click='toggle_slide()'>
  			<img src="../../static/images/1/main_menu_normal.png">
  		</div>
  		<p>热榜</p>
  		<div class="ofans_headers_right">
  			<img src="../../static/images/1/main_search_pressed.png">
  		</div>
   </div>
</template>

<script>

// require('../less/ofans_headers.less');

export default {
  name: 'ofans_headers',
    data(){

      return{

        flag:true

      }

    },
    methods:{
        toggle_slide(){

          // 侧拉功能

          var slides = document.querySelector('.clips_hot_slide');

           var clips_hot_content = document.querySelector('.clips_hot_content');

         if(this.flag){

            slides.style.display='block';

            clips_hot_content.className = ' clips_hot_content  toggle_content';

             this.flag = false;
         
          }
          else{

             slides.style.display='none';

             clips_hot_content.className = ' clips_hot_content ';

             this.flag = true;

           }
            
            
        }

    }
       



}
</script>

<style lang="less" scoped>
	.ofans_headers{
	
	height:80/64rem;

	margin:0 auto;

	background-Color:rgb(165,75,232);

	position:relative;

}
.ofans_headers_left img{
	
	height:30/64rem;

	width:40/64rem;

	margin-left:30/64rem;

	margin-top:25/64rem;

}
.ofans_headers>p{
	
	

	height:80/64rem;

    font-size:36/64rem;
    
    line-height:80/64rem;
   
    color:#fff;

    font-famliy:'Arial';

    width:((640-30*2-40-35)/640)*100%;

    text-align:center;

}
.ofans_headers_right img{
	
	height:35/64rem;

	width:35/64rem;

}
.ofans_headers_right{
	
	position:absolute;

	right:30/64rem;

	bottom:22.5/64rem;

}
.ofans_headers_left,.ofans_headers>p,.ofans_headers_right{
	
float:left;


}
.clearFix::after{
	
	content:'';

	clear:both;

	display:block;

}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
body {
  background: #f0f2f5;
  font-family: "Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","Microsoft YaHei UI","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
  font-size: 25/64rem;
  color: #444;
}



</style>
